<template>
	<view class="machine-wrap">
		<view class="machine">
			<view class="machine-roof">
				<view class="machine-silencer">
					<view class="machine-smoke"></view>
				</view>
			</view>
			<view class="machine-main">
				<view class="machine-body"></view>
				<view class="machine-back"></view>
				<view class="machine-front"></view>
			</view>
		</view>
		<view class="road">
			<view class="mud-wrap clearfix">
				<view class="mud"></view>
				<view class="mud"></view>
				<view class="mud"></view>
				<view class="mud"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: true
			}
		},
	};
</script>

<style>
	page {
		background: #ffc600;
	}

	*,
	:after,
	:before {
		box-sizing: border-box
	}

	.pull-left {
		float: left
	}

	.pull-right {
		float: right
	}

	.clearfix:after,
	.clearfix:before {
		content: '';
		display: table
	}

	.clearfix:after {
		clear: both;
		display: block
	}

	.machine-wrap {
		top: 50%;
		left: 50%;
		width: 475rpx;
		height: 145rpx;
		position: absolute;
		margin-top: -72.5rpx;
		margin-left: -237.5rpx;
		border-bottom: 5rpx solid #271e01;
	}

	.machine {
		width: 475rpx;
		height: 145rpx;
		padding-bottom: 20rpx;
	}

	.machine .machine-roof,
	.machine .machine-main {
		margin: auto;
	}

	.machine-wrap .road .mud:before,
	.machine-wrap .road .mud:after,
	.machine .machine-roof .machine-silencer:before,
	.machine .machine-roof .machine-silencer:after,
	.machine .machine-body:before,
	.machine .machine-body:after,
	.machine .machine-main .machine-back:before,
	.machine .machine-main .machine-back:after,
	.machine .machine-main .machine-front:after {
		content: '';
		position: absolute;
	}

	.machine .machine-roof {
		width: 80rpx;
		height: 60rpx;
		bottom: -1rpx;
		position: relative;
		background: #ffc600;
		border: 15rpx solid #271e01;
		border-bottom: none;
	}

	.machine .machine-roof .machine-silencer {
		width: 14rpx;
		left: -50rpx;
		height: 12rpx;
		bottom: -1rpx;
		position: absolute;
		background: #271e01;
	}

	.machine .machine-roof .machine-silencer:before {
		height: 0;
		bottom: 100%;
		width: inherit;
		border: 6rpx solid #271e01;
		border-top: 4rpx solid transparent;
		border-left: 8rpx solid transparent;
	}

	.machine .machine-roof .machine-silencer:after {
		left: 4rpx;
		width: 5rpx;
		height: 12rpx;
		bottom: 100%;
		background: inherit;
		transform: skewY(-35deg);
	}

	.machine .machine-roof .machine-silencer .machine-smoke {
		left: -5rpx;
		width: 16rpx;
		height: 16rpx;
		bottom: 20rpx;
		border-radius: 50%;
		position: absolute;
		background: #271e01;
		transform: scale(0);
		animation: moveSmoke .5s linear infinite;
	}

	.machine-main {
		height: 60rpx;
		width: 185rpx;
		position: relative;
	}

	.machine .machine-main .machine-body {
		height: inherit;
		width: inherit;
		position: relative;
		background: #271e01;
	}

	.machine .machine-main .machine-body:before {
		left: -15rpx;
		width: 30rpx;
		height: inherit;
		background: inherit;
		transform: skewX(-20deg);
	}

	.machine .machine-main .machine-body:after {
		bottom: 0;
		right: 15rpx;
		width: 35rpx;
		height: 41rpx;
		background: #ffc600;
	}

	.machine .machine-main .machine-back {
		bottom: -1rpx;
		width: 75rpx;
		height: 45rpx;
		position: absolute;
	}

	.machine .machine-main .machine-back:before {
		width: 75rpx;
		height: 45rpx;
		background: #ffc600;
		border-radius: 50% 50% 0 0 / 85% 85% 0 0;
	}

	.machine .machine-main .machine-back:after {
		top: 50%;
		left: 50%;
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		margin-top: -15rpx;
		margin-left: -30rpx;
		background: transparent;
		border: 15rpx solid #271e01;
	}

	.machine .machine-main .machine-front {
		z-index: 1;
		width: 60rpx;
		height: 60rpx;
		right: -24rpx;
		bottom: -20rpx;
		border-radius: 50%;
		position: absolute;
		background: #271e01;
		border-top: 2rpx solid #ffc600;
	}

	.machine .machine-main .machine-front:after {
		top: 50%;
		left: 50%;
		width: 80rpx;
		height: 20rpx;
		margin-top: -10rpx;
		margin-left: -40rpx;
		background: inherit;
		border: 2rpx solid #ffc600;
	}

	.machine-wrap .road {
		right: 0;
		bottom: 0;
		height: 15rpx;
		width: 140rpx;
		overflow: hidden;
		position: absolute;
	}

	.machine-wrap .road .mud-wrap {
		width: 160rpx;
		position: absolute;
		animation: moveRoad .4s linear infinite;
	}

	.machine-wrap .road .mud {
		bottom: 0;
		width: 40rpx;
		float: left;
		height: 15rpx;
		position: relative;
		display: inline-block;
	}

	.machine-wrap .road .mud:before,
	.machine-wrap .road .mud:after {
		width: 20rpx;
		height: 20rpx;
		border-radius: 4rpx;
		background: #271e01;
		transform: rotate(45deg);
	}

	.machine-wrap .road .mud:before {
		left: 0;
		bottom: -17rpx;
	}

	.machine-wrap .road .mud:after {
		right: 0;
		bottom: -20rpx;
	}

	.machine-wrap .machine-roof,
	.machine-wrap .machine-body,
	.machine-wrap .machine-silencer,
	.machine-wrap .machine-back:before,
	.machine-wrap .machine-front {
		animation: upDown .6s linear infinite;
	}

	.machine-wrap .machine-silencer {
		animation-duration: .4s;
	}

	.machine-wrap .machine-front {
		animation-duration: .3s;
	}

	.machine-wrap .machine-back {
		animation: upDown .8s linear infinite;
	}

	@keyframes moveRoad {
		0% {
			right: -40rpx;
		}

		100% {
			right: 0;
		}
	}

	@keyframes moveSmoke {
		0% {
			opacity: 0;
			transform: scale(0) translate(0);
		}

		60% {
			transform: scale(.5) translate(0);
		}

		100% {
			opacity: .6;
			transform: scale(1) translate(-10rpx, -40rpx);
		}
	}

	@keyframes upDown {
		0% {
			transform: translateY(0);
		}

		50% {
			transform: translateY(2rpx);
		}

		100% {
			transform: translateY(0);
		}
	}
</style>
